:root {
  /* tune these */
  --noise-opacity: 1;   /* 0–1 */
  --noise-size: 200px;    /* tile size */
}

  /* create a page-wide overlay that ignores clicks */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;   /* don't block buttons/links */
  z-index: 999999;    /* above everything */
  opacity: var(--noise-opacity);
  background-image: url('assets/noisy-background.jpg'); /* tiny transparent PNG */
  background-repeat: repeat;
  background-size: var(--noise-size) var(--noise-size);
  mix-blend-mode: multiply; /* try multiply/overlay/normal */
}


body {
  color: black;
  font-family: Verdana;
  background-image: url("images/background01.png");
  background-size: 100%
}

html, body {
  overflow-x: hidden;
}

h5 {
  color: white;
  background-color: #434e0a;
  padding-left: 10px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 500;
  font-size: 25px;
  position:absolute;
  right: 270px;
  top: 93.5px;
}
  
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#boygenius-record {
  animation: spin 4s linear infinite;
  width: 100px;
  position: absolute;
  top: 40px;
  right: 100px;
  z-index: 2;
}

#the-record {
  width: 100px;
  position: absolute;
  top: 40px;
  right: 35px;
  z-index: 1;
}

#edit {
  position: absolute;
  top: 470px;
  right: 600px;
  width: 170px;
  height:160px;
  z-index: 1;
}

#tv {
  position: absolute;
  top: 400px;
  right: 500px;
  width: 300px;
  z-index: 2;
}

#book {
  position: absolute;
  top: 180px;
  right: -50px;
  width: 230px;
  transform:rotate(20deg);
  z-index: 2;
}

#diary {
  position: absolute;
  bottom: 100px;
  left: 40px;
  width:400px;
  filter: brightness(110%);
  transform:rotate(-15deg);
  z-index: 1;
}

#musicplayer {
  position: absolute;
  bottom: 50px;
  left: 300px;
  width: 200px;
  filter: brightness(1.2);
  transform:rotate(15deg);
  z-index: 2;
}

#diary:hover {
  transform: scale(1.15) rotate(-10deg);
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

#musicplayer:hover {
  transform: scale(1.15) rotate(10deg);
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

#book:hover {
  transform: scale(1.15) rotate(10deg);
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

#tv:hover,
#tv:hover ~ #edit {
  transform: scale(1.15) rotate(-10deg);
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

.letters {
  position:absolute;
  z-index: 2;
}

.letters:hover {
  transform: scale(1.3);
  cursor: pointer; 
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}
  
.kylies-website {
  background-color: white;
  width: 550px;
  height: 45px;
  top: 50px;
  right: 230px;
  padding: 20px;
  border-radius:7px;
  opacity: 0.25;
  position: absolute;
  z-index: 1;
}

#hsrm {
  position: absolute;
  top: 185px;
  right: 135px;
  width: 80px;
  height: 80px;
}

#neocities {
  position: absolute;
  top: 155px;
  right: 150px;
  width: 100px;
  height: 50px;
}

#neocities:hover, #hsrm:hover, #jeremy:hover, #wolfstar:hover {
  transform: scale(1.15);
  cursor:  pointer;
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

#jeremy {
  position: absolute;
  bottom: 205px;
  right: 180px;
  width: 300px;
  height: 50px;
}

#apple {
  position: absolute;
  bottom: 0px;
  right: 305px;
  width: 220px;
}

#wolfstar {
  position: absolute;
  bottom: 50px;
  left: 520px;
  width: 200px;
}
    
.ships:hover {
  transform: scale(1.15);
  cursor: pointer; 
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}

#star:hover {
  transform: scale(1.2);
  cursor: pointer; 
  transition-property: all; 
  transition-duration: 0.2s; 
  transition-timing-function: ease;
}